<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="./lib/echarts.min.js"></script> -->
    <script src="./lib/echarts.js"></script>
    <title>中国星网</title>
    <link rel="stylesheet" type="text/css" href="./lib/element-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="./lib/common.css" />
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css">
    <style type="text/css">
        html,
        body {
            height: 100%;
            box-sizing: border-box;
        }

        .mySceneBox {
            box-sizing: border-box;
        }
        header {
            background-color: #3383FF;
            height: 56px;
            line-height: 56px;
            width: 100%;
            box-sizing: border-box;
            display: flex !important;
            align-items: center;
        }
        nav{
            display: flex;
            height: 56px;
        }
        .logo-container {
            display: inline-block;
            margin-right: 20px;
        }

        .logo {
            height: 56px;
        }

        #nav-menu {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        #nav-menu li {
            margin-right: 10px;
        }

        #nav-menu a {
            text-decoration: none;
            padding: 10px 6px;
            color: rgba(255,255,255,0.5);
        }

        #nav-menu a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        #nav-menu a.active {
            color: #fff;
            font-weight: bold;
        }

        main {
            /*padding: 20px;*/
        }

        iframe {
            width: 100%;
            height: calc(100vh - 66px);
            border: none;
            overflow: auto;
        }
        /* agents div 定位在右下角 */
        .agents {
            position: absolute; /* 绝对定位 */
            bottom: 100px; /* 距离底部 20px */
            right: 30px; /* 距离右侧 20px */
            background-color: #F2F6FC; /* 背景颜色 */
            color: white; /* 文字颜色 */
            border-radius: 5px; /* 圆角 */
            font-size: 14px; /* 字体大小 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            z-index: 1000; /* 确保在其他内容之上 */
            width: 76px;
            height: 95px;
            cursor: pointer;
        }

    </style>
</head>

<body style="width: 100%;padding: 0; margin: 0">
    <div style="height: 100%">
        <div class="mySceneBox w-100 h-100" id="mySceneBox" v-loading="loading">
            <header>
                <nav>
                    <div class="logo-container">
                        <img src="./img/header/h-title.png" style="height: 56px" alt="Logo" class="logo">
                    </div>
                    <ul id="nav-menu">
                        <li><a href="#" data-target="homeWork.html">工作台</a></li>
                        <li><a href="#" data-target="loading.html">范本库</a></li>
                        <li><a href="#" data-target="loading.html">条款库</a></li>
                        <li><a href="#" data-target="loading.html">相对方管理</a></li>
                        <li><a href="#" data-target="loading.html">合同起草</a></li>
                        <li><a href="#" data-target="loading.html">合同查询</a></li>

                        <li><a href="#" data-target="contract.html">归档管理</a></li>
                        <li><a href="#" data-target="loading.html">合同履约管理</a></li>
                        <li><a href="#" data-target="loading.html">合同履行评估管理</a></li>
                        <li><a href="#" data-target="loading.html">合同管理评价</a></li>
                        <li><a href="#" data-target="homeIndex.html">看板</a></li>
                    </ul>
                </nav>
            </header>

            <main>
                <iframe id="content-frame" src="homeWork.html" frameborder="0"></iframe>
                <div class="agents">
                    <img src="./img/header/agent.jpg"  id="agentTrigger" style="height: 100%" alt="Logo" class="logo">
                </div>
            </main>
        </div>
    </div>
    <script type="text/javascript" src="./lib/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/vue.min.js"></script>
    <script type="text/javascript" src="./lib/element-ui.min.js"></script>

    <script type="text/javascript">



        const vm = new Vue({ // 配置对象 options
            el: '#mySceneBox',  // element: 指定用vue来管理页面中的哪个标签区域
            data() {
                return {
                    loading: false
                }
            },
            mounted() {
                const agentDiv = document.querySelector('.agents');
                const contentFrame = document.getElementById('content-frame');

                // 定义哪些页面需要显示 agent 图片
                const showAgentPages = ['homeWork.html', 'homeIndex.html','contract.html','loading.html']; // 根据你的需求调整

                const checkAndToggleAgent = () => {
                    try {
                        const currentSrc = contentFrame.getAttribute('src'); // 获取当前 src
                        const fileName = currentSrc.split('/').pop(); // 提取文件名，如 homeWork.html

                        if (showAgentPages.includes(fileName)) {
                            agentDiv.style.display = 'block'; // 显示
                        } else {
                            agentDiv.style.display = 'none';  // 隐藏
                        }
                    } catch (e) {
                        console.warn('无法获取 iframe 源路径', e);
                    }
                };

                // 监听 iframe 加载完成（每次切换页面都会触发）
                contentFrame.addEventListener('load', () => {
                    // 延迟一点确保 src 已更新（可选）
                    setTimeout(checkAndToggleAgent, 50);
                });

                // 初始化：页面首次加载时也检查一次
                checkAndToggleAgent();
                /********************************************/
                // script.js
                document.addEventListener('DOMContentLoaded', function() {
                    console.log('00')
                    // 获取触发元素
                    const agentTrigger = document.getElementById('agentTrigger');
                    const contentFrame = document.getElementById('content-frame');
                    // 添加点击事件监听器
                    agentTrigger.addEventListener('click', function(e) {
                        e.preventDefault();
                        console.log('agentTrigger clicked');
                        // 更改 iframe 的 src 属性以加载 agent.html
                        contentFrame.src = 'agent.html';
                    });
                });

                document.addEventListener('DOMContentLoaded', function() {
                    const navLinks = document.querySelectorAll('#nav-menu a');
                    const contentFrame = document.getElementById('content-frame');

                    navLinks.forEach(link => {
                        link.addEventListener('click', function(e) {
                            e.preventDefault();

                            // 移除所有链接的 active 类
                            navLinks.forEach(l => l.classList.remove('active'));

                            // 给当前点击的链接添加 active 类
                            this.classList.add('active');

                            // 加载对应的内容
                            const targetSrc = this.getAttribute('data-target');
                            console.log(targetSrc);
                            contentFrame.src = targetSrc;
                        });
                    });

                    // 默认激活第一个菜单项
                    if (navLinks.length > 0) {
                        navLinks[0].classList.add('active');
                    }
                });
            },
            methods: {

            }

        })


    </script>
</body>

</html>
